<template>
	<view>
		<view class="poster-content">
		<!-- <page-head :transparent="false" class="yk">
			<slot slot="title">
				<view class="title-box"> {{ title.length > 10 ? title.substr(0, 10) + '...' : title }}</view>
			</slot>
			<slot slot="right">
				<view class="image-box">
					<image @click="share" src="../../static/img/fenxiang.png" mode="aspectFill"></image>
				</view>
			</slot>
		</page-head> -->

		<view class="yk">
			<view   @click="back">
				<image class="left" src="../../static/img/left.png"></image>
			</view>
			<view class="title-box">{{title}}</view>
			<view class="image-box">
				<image @click="share" src="../../static/img/fenxiang.png" mode="aspectFill"></image>
			</view>
		</view>

		<view id="img" v-if="infoKind.link">
			 <web-view  style="margin-top:60px;" :src="infoKind.link"></web-view>
		</view>
		<view v-if="version == 1">
		</view>	
	 </view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: '节假日祝福贺卡',
				link: '',
				titles:'',
				id:'',
				infoKind:{},
				pageIndex:'',
				cardkindIndex:'',
				categoryIdhk:'',
				urls:'',
				version: 0
			}
		},
		//  onBackPress(options) {  
        //     if (options.from === 'navigateBack') {  
        //         return false;  
        //     }  
        //     this.back();  
        //     return true;  
        // },  
		onLoad(event) {
			this.id = event.id;
			this.pageIndex=event.pageIndex;
			this.cardkindIndex=event.cardkindIndex;
			this.categoryIdhk=event.categoryIdhk
			this.version = window.version;
			this.cardsInfo()
			
		},
		onShow() {
			window.genVersion();
			this.link = this.link;
		},
		methods: {
			 back() {  
				uni.redirectTo({
					url: './material?pageIndex='+this.pageIndex+'&cardkindIndex='+this.cardkindIndex+'&categoryIdhk='+this.categoryIdhk
				});
            },
			// 接口
			cardsInfo() {
				try {
					uni.request({
						url:this.$usereq + "/coupon-admin/zy/greetcard/info/" + this.id,
						method: "GET",
						header: {
							"blade-auth": decodeURI(uni.getStorageSync("token")),
							"content-type": "application/json"
						},
						data: {
							id: this.id
						},
						success: res => {
							let datas = res.data;
							console.log(datas);
							if (datas.code == 200) {
								this.infoKind = datas.data;
								this.link=datas.data.link;

								var textUrl= datas.data.link;
								const regex = new RegExp('<ul', 'gi');
								textUrl= textUrl.replace(regex, `<ul style="position: absolute;top:-19px;text-align: left;width: 320px;height: 486px;background-repeat: no-repeat;background-size: 100% 100%;"`)
								this.textUrl = textUrl;


								this.titles=datas.data.title;
								this.urls=datas.data.url;
								console.log(this.infoKind);
							} else {
								uni.showToast({
									title: datas.msg,
									icon: "none",
									duration: 2000
								});
							}
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					console.log(e.message);
				}
			},
			share() {
				console.log('share img url===' + this.link+'===titles==='+this.titles+'===this.urls==='+this.urls);
				onShare(this.link, this.titles,this.urls, this.titles);
			}
			
		}
	}
</script>

<style lang="scss" scoped>

	.poster-content {
		width: 100%;
		min-width: 750px;
		font-size: 36px;
   		padding-top:20px;
   		background: white;
				.yk{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 60px;
			padding: 40px 32px;
			// margin-top: 20px;
   			 background: white;
			.left{
				width: 40px;
				height:40px;
			}
		}
		
		image {
			width: 100%;
			display: block;
		}

		.btn-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100px;
			overflow: auto;
			text-align: center;

			view {
				float: left;
				line-height: 100px;
				width: 100%;
				color: #fff;
			}

			view:nth-child(1) {
				background: #4DB6FF;
			}

			view:nth-child(2) {
				background: #0096FF;
			}
		}
	}
	.title-box {
		// padding-left: 134px;
	}

	.image-box {
		width: 40px !important;
		height: 34px !important;
		position: relative;
		top: 0px;
		display: flex;
		flex-wrap: wrap;

		image {
			width: 100%;
			height: 100%;
		}
	}

	iframe{
		position: absolute;
		display: block;
		border: 0px;
		top: 70px !important;
		bottom: 812.531px;
		width: 100%;
		height: 100%;
	}

	
</style>